<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <!--Extjs version 6.2.0 -->
    <link href="css/theme-classic-all.css" rel="stylesheet" />
    <script type="text/javascript" src="locale/locale-zh_CN.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript">
        Ext.application({
            launch: function() {
                var images = Ext.get('images').select('img');
                Ext.each(images.elements, function(el) {
                    var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
                        isTarget: false
                    });
                });
            }
        });
        var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
            ignoreSelf: false
        });
    </script>
    <style>
        #content {
            width: 600px;
            height: 400px;
            padding: 10px;
            border: 1px solid #000;
        }
        
        #images {
            float: left;
            width: 40%;
            height: 100%;
            border: 1px solid Black;
            background-color: rgba(222, 222, 222, 1.0);
        }
        
        #mainRoom {
            float: left;
            width: 55%;
            height: 100%;
            margin-left: 15px;
            border: 1px solid Black;
            background-color: rgba(222, 222, 222, 1.0);
        }
        
        .image {
            width: 64px;
            height: 64px;
            margin: 10px;
            cursor: pointer;
            border: 1px solid Black;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="content">
        <div id="images">
            <img src="images/1.png" class="image" />
            <img src="images/2.png" class="image" />
            <img src="images/3.png" class="image" />
            <img src="images/4.png" class="image" />
            <img src="images/5.jpg" class="image" />
            <img src="images/6.jpg" class="image" />
            <img src="images/7.jpg" class="image" />
            <img src="images/8.jpg" class="image" />
        </div>
        <div id="mainRoom"></div>
    </div>
</body>

</html>